<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :paging-enabled="false"
    :auto-show-back-to-top="false"
    :loading-more-enabled="false"
  >
    <template #top>
      <wd-navbar 
        title="茶叶产品培训" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>
    
    <view class="px-[30rpx] pt-[30rpx]">
      <!-- 学习列表 -->
      <view 
        v-for="item in dataList" 
        :key="item.id"
        class="mb-[24rpx] bg-white rounded-[16rpx] p-[30rpx] relative border border-solid border-[#4a9650]"
        @click="handleSelectItem(item)"
      >
        <!-- 完成角标 -->
        <image 
          v-if="item.complete"
          src="/src/static/images/success1.png" 
          mode="aspectFit"
          class="w-[72rpx] h-[48rpx] absolute top-[-2rpx] right-[-2rpx] z-10"
        ></image>
        
        <!-- 标题 -->
        <view class="text-[36rpx] text-[#282828] font-500 mb-[20rpx]">
          {{ item.title }}
        </view>
        
        <!-- 学习状态和时间 -->
        <view class="flex items-center justify-between">
          <view class="text-[28rpx] text-[#666666]">
            <text v-if="item.complete">学习已完成</text>
            <text v-else-if="!item.complete && item.progress == 0">学习未开始</text>
            <text v-else-if="!item.complete && item.progress > 0">已开始学习</text>
          </view>
          
          <!-- 学习时间（只在进行中且有时间时显示） -->
          <view 
            v-if="!item.complete && item.progress > 0"
            class="text-[28rpx] text-[#666666]"
          >
            {{ formatSeconds(item.progress) }}
          </view>
        </view>
      </view>
      
      <!-- 进入考核按钮 -->
      <view 
        class="w-full h-[120rpx] flex items-center justify-center relative overflow-hidden rounded-[16rpx] mt-[40rpx]"
        @click="handleEnterExam"
        v-show="showBottom"
      >
        <image 
          src="/src/static/images/bg9.png" 
          mode="aspectFill" 
          class="w-full h-full absolute top-0 left-0"
        ></image>
        <view class="flex items-center gap-[8rpx] relative z-10">
          <text class="text-[36rpx] font-400 text-white relative top-[-3rpx]">进入考核</text>
          <wd-icon name="a-chevron-rightdouble" size="24px" color="#FFFFFF"></wd-icon>
        </view>
      </view>
      
      <view class="h-[50rpx]"></view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { themeList } from '@/api/study.js'
import { formatSeconds } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'TraeProductTraining',
})

const pagingRef = ref(null)
const dataList = ref([])
const selectedId = ref(null) // 选中的项目ID
const showBottom = ref(false)
// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 选择学习项
const handleSelectItem = (item) => {
  // 已完成的不可选中
  if (item.complete) {
    return uni.showToast({
      title: '学习已完成',
      icon: 'none'
    })
  }
  // 跳转到学习页面
  uni.navigateTo({
    url: `/pages-children/study/index?id=${item.id}`
  })
}

// 进入考核
const handleEnterExam = () => {
  // 跳转到考核页面
  uni.switchTab({
    url: `/pages/exercise/index`
  })
}

// 获取状态文本
// const getStatusText = (status) => {
//   const statusMap = {
//     completed: '学习已完成',
//     notStarted: '学习未开始',
//     inProgress: '学习已开始倒计时'
//   }
//   return statusMap[status] || ''
// }

// 格式化时间（秒转换为 分钟m秒s 格式）
// const formatTime = (seconds) => {
//   const minutes = Math.floor(seconds / 60)
//   const secs = seconds % 60
//   return `${minutes}m${secs}s`
// }

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  themeList({
    scope: 2 //1:强脑 2:茶叶
  }).then(res => {
    console.log('res---', res)
    pagingRef.value.complete(res);
    showBottom.value = true
  }).catch(err => {
    pagingRef.value.complete(false)
  })
}
</script>

<style>
page {
  background-color: #F1F1F1;
}
</style>

<style scoped>
</style>
